import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { RankingItemWrapper } from './style'
import { getImageSize } from '@/utils/HandlerImg'
import {fetchPlayerDetailAction, fetchLyricAction} from '@/views/player/store/player'
import { useAppDispatch } from '@/store'

interface IProps {
  children?: ReactNode
  itemData: any
}

const RankingItem: React.FC<IProps> = (props) => {
  const dispatch = useAppDispatch()
  const playSong = (id: number) => {
    dispatch(fetchPlayerDetailAction({ ids: id }))
    dispatch(fetchLyricAction({ id }))
  }

  const { itemData } = props
  return (
    <RankingItemWrapper>
      <div className="header">
        <div className="image">
          <img
            src={getImageSize(itemData.coverImgUrl, 80)}
            alt={itemData.name}
            title={itemData.name}
          />
        </div>
        <div className="info">
          <a >{itemData.name}</a>
          <div>
            <button className="btn play sprite_02"></button>
            <button className="btn favor sprite_02"></button>
          </div>
        </div>
      </div>
      <div className="list">
        {itemData.tracks.slice(0, 10).map((item: any, index: number) => (
          <div className="list-item" key={item.id}>
            <div className="rank">{index + 1}</div>
            <div className="info">
              <span className="name text-nowrap" onClick={() => {playSong(item.id)}}>{item.name}</span>
              <div className="operate">
                <button className="btn play sprite_02" onClick={() => {playSong(item.id)}}></button>
                <button className="btn sprite_icon2 addto"></button>
                <button className="btn favor sprite_02"></button>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="footer">
        <a href="#">查看全部 &gt;</a>
      </div>
    </RankingItemWrapper>
  )
}

export default memo(RankingItem)
